<template>
  <div class="assets-item-box">
    <div class="assets-item-box-top">
      <div class="chart"></div>
      <div class="text">
        <div>
          {{ text }}
        </div>
        <div v-if="showDetail" style="font-size: 14px;color: #1cf6fc;cursor: pointer;" @click="handleDetailClick">详情
        </div>
      </div>
    </div>
    <div class="assets-item-box-bottom">
      <div v-if="showRate" class="rate">
        <div>
          同比增长
        </div>
        <div>
          {{ tbRate === '-' ? tbRate : tbRate + ' %' }}
        </div>
      </div>
      <div><span :style="getTextStyle">{{ value ? value : 0 }}</span></div>
      <div v-if="showRate" class="rate">
        <div>
          环比增长
        </div>
        <div>
          {{ hbRate === '-' ? hbRate : hbRate + ' %' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AssetsItem',
  props: {
    text: {
      type: String,
      default: ''
    },
    value: {
      type: String | Number,
      default: '0'
    },
    detailPath: {
      type: String,
      default: ''
    },
    showDetail: {
      type: Boolean,
      default: false,
    },
    showRate: {
      type: Boolean,
      default: false,
    },
    changeStyle: {
      type: Boolean,
      default: false,
    },
    tbRate: {
      type: String,
      default: '0'
    },
    hbRate: {
      type: String,
      default: '0'
    }
  },
  methods: {
    handleDetailClick() {
      const path = this.detailPath

      // 本页面打开
      this.$router.push({path: path})

      // 新页面打开
      // let routeData = this.$router.resolve({
      //   path: path
      // })
      // window.open(routeData.href, '_blank')
    },
  },
  computed: {
    getTextStyle() {
      if (this.changeStyle) {
        if (this.value > 35 || this.value < 0) {
          return {color: 'red'}
        } else {
          return {color: '#48e9be'}
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.assets-item-box {
  width: 230px;

  .assets-item-box-top {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .chart {
      width: 10px;
      height: 14px;
      background: #4DC2FF;
    }

    .text {
      width: 100%;
      font-size: 16px;
      margin-left: 8px;
      color: #FFFFFF;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
  }

  .assets-item-box-bottom {
    width: 230px;
    height: 40px;
    text-align: center;
    background-image: url("../../../../assets/leakage/bi/section_bg.png");
    background-size: 230px 40px;
    background-repeat: no-repeat;
    padding-top: 8px;
    display: flex;
    justify-content: space-evenly;

    .rate {
      font-size: 14px;
      color: #FFFFFF;
    }

    span {
      font-size: 22px;
      //color: #1CF6FC;
      color: #FFFFFF;
      font-weight: bold;
    }
  }
}
</style>
